<template>
  <div class="question" v-if="isRedoal">
    <div class="main" v-if="!show && !finish">
      <div class="typestaute">
        <div class="titlestyle">
          <div v-if="awardquestionList.awardquestionList[clickIndex].type == 1">
            单选
          </div>
          <div
            v-else-if="
              awardquestionList.awardquestionList[clickIndex].type == 2
            "
          >
            多选
          </div>
          <div v-else>填空</div>
          <div class="cetertitle one_line">{{ awardquestionList.title }}</div>
          <div>
            {{ clickIndex + 1 }}/{{
              awardquestionList.awardquestionList.length
            }}
          </div>
        </div>

        <div class="mainstyle">
          {{ awardquestionList.awardquestionList[clickIndex].content }}
        </div>
        <div class="no-sliding">
          <div
            class="lasterstyle"
            v-if="awardquestionList.awardquestionList[clickIndex].type == 1"
          >
            <van-radio-group v-model="answerList[clickIndex].xuanxiangId">
              <div
                v-for="(i, index) in awardquestionList.awardquestionList[
                  clickIndex
                ].awardchoiceList"
                :key="index"
                class="radiostyle"
              >
                <van-radio :name="i.choiceId" checked-color="#FF9500">{{
                  i.choiceContent
                }}</van-radio>
              </div>
            </van-radio-group>
          </div>

          <div
            class="lasterstyle"
            v-else-if="
              awardquestionList.awardquestionList[clickIndex].type == 2
            "
          >
            <van-checkbox-group v-model="answerList[clickIndex].xuanxiangId">
              <div
                v-for="(i, index) in awardquestionList.awardquestionList[
                  clickIndex
                ].awardchoiceList"
                :key="index"
                class="radiostyle"
              >
                <van-checkbox :name="i.choiceId" checked-color="#FF9500"
                  >{{ i.choiceContent }}
                </van-checkbox>
              </div>
            </van-checkbox-group>
          </div>
          <div class="lasterstyle" v-else>
            <van-field
              type="textarea"
              autosize
              rows="2"
              style="border: 1px solid #ebedf0"
              placeholder="请输入内容"
              v-model="answerList[clickIndex].answer"
            >
            </van-field>
          </div>
        </div>
      </div>
      <div class="selectbut">
        <div>
          <van-button
            type="warning"
            round
            size="large"
            class="bottom-btn"
            @click="RightQuestion"
            v-if="statetype == true"
            >下一题
          </van-button>
          <van-button
            type="warning"
            round
            size="large"
            class="bottom-btn"
            @click="finishQuestion"
            v-if="statetype == false"
            >完 成</van-button
          >
        </div>
      </div>
    </div>
    <van-popup
      v-model="show"
      round
      class="naire-content flex_tb_c"
      :close-on-click-overlay="false"
    >
      <div>{{ awardquestionList.title }}</div>
      <div>{{ awardquestionList.content }}</div>
      <div>结束时间： {{ awardquestionList.endTime }}</div>
      <van-button
        type="warning"
        style="background: orange; border: none"
        class="bottom-btn"
        size="large"
        round
        @click="show = false"
        >现在开始</van-button
      >
    </van-popup>

    <van-popup
      v-model="finish"
      round
      class="finish-content flex_tb_c"
      :close-on-click-overlay="false"
    >
      <div class="finish-bg"></div>
      <div class="finish-con flex_line_c">
        <div class="flex_lr_m finish-con-top" @click="toRecordDetail">
          <div>
            <img src="../../../assets/img21.png" />
            当前积分：{{ ansPoints.amount }}
          </div>
          <div>明细 ></div>
        </div>
        <div class="flex_line_c finish-con-con">
          <div class="flex_line_c_m finish-cc-jf" v-if="isTrue">
            <img src="../../../assets/img5.png" />
            <span>{{ ansPoints.amount }}积分</span>
          </div>
          <template v-else>
            <div style="color: #fff; margin-top: 10px; font-weight: bold">
              正确答案
            </div>
            <div class="flex_c_m finish-cc-jf">
              <span v-for="(item, idx) in trueAns"
                >{{ item
                }}<span v-if="idx != trueAns.length - 1">、</span></span
              >
            </div>
          </template>

          <div class="flex_lr_m finish-cc-xq">
            <span>准确率：{{ ansPoints.correctRatio }}%</span>
            <span>累计积分：{{ ansPoints.score }}</span>
          </div>
        </div>
      </div>
      <div style="width: 100%">
        <van-button
          type="warning"
          size="large"
          class="bottom-btn"
          round
          @click="NextQuestion"
          v-if="
            !isTrue &&
            clickIndex != awardquestionList.awardquestionList.length - 1
          "
          >继续答题</van-button
        >
        <van-button
          type="warning"
          size="large"
          class="bottom-btn"
          round
          @click="toChangeFinish"
          >我要抽奖</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import debounce from "@/utils/debounce.js";    //防抖
import request from "@/utils/request";
export default {
  data() {
    return {
      video: "",
      awardquestionList: {},

      clickIndex: 0,
      answerList: [],
      checkList: [],
      textarea: "",
      statetype: true,
      disabled: true, //上一题禁止可用
      show: false,
      finish: false,
      isTrue: false,
      trueAns: [],
      ansPoints: {},
      isFirst: window.sessionStorage.getItem("first"),
      isRedoal: false,
    };
  },
  created() {
    let userId = window.localStorage.getItem("userId");
    if (this.$route.params.time) {
      window.location.reload();
    } else {
      this.isRedoal = true;
    }
    this.video = JSON.parse(this.$route.query.row);
    this.getQuestion();
  },
  methods: {
    getQuestion() {
      request({
        // url: "/generator/awardnaire/front/info?awardnaireId=",
        url: "/generator/awardnaire/front/info?naireId=" + this.video,
        method: "get",
      }).then((response) => {
        if (response.awardnaire.awardquestionList.length == 0) {
          this.finish = true;
          this.isTrue = true;
          if (response.awardusernaire) {
            response.awardusernaire.amount = response.usedamount.amount;
            this.ansPoints = response.awardusernaire;
          }
        } else {
          response.awardnaire.endTime = this.riqi(
            response.awardnaire.endTime * 1000
          );
          if (response.awardnaire.awardquestionList.length == 1) {
            this.statetype = false;
          }
          response.awardnaire.awardquestionList.forEach((item) => {
            console.log(item);
            if (item.type == 2) {
              this.answerList.push({
                questionId: item.id,
                xuanxiangId: [],
              });
            } else {
              this.answerList.push({
                questionId: item.id,
                xuanxiangId: "",
              });
            }
          });
          this.show = true;
        }
        this.awardquestionList = response.awardnaire;
      });
    },
    toChangeFinish() {
      console.log(this.awardquestionList);
      if (this.awardquestionList.drawType == 0) {
        this.$router.push({
          name: "turntable",
          query: { row: this.awardquestionList.drawId, form: "ans" },
        });
      } else {
        this.$router.push({
          name: "draw",
          query: { row: this.awardquestionList.drawId, form: "ans" },
        });
      }
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
    LastQuestion() {
      this.clickIndex--;
      const length = this.awardquestionList.awardquestionList.length - 1;
      if (this.clickIndex < length && this.clickIndex >= 0) {
        this.statetype = true;
        if (this.clickIndex == 0) {
          console.log("第一条无法选择");
          this.disabled = true;
        }
      } else if (this.clickIndex < 0) {
        this.clickIndex = 0;
      }
    },
    NextQuestion() {
      this.clickIndex++;
      this.finish = false;
      const length = this.awardquestionList.awardquestionList.length - 1;
      if (this.clickIndex < length) {
      } else if (this.clickIndex >= length) {
        this.clickIndex = length;
        this.statetype = false;
      }
    },
    RightQuestion() {
			//防抖
      debounce(() => {
        console.log("触发");
        this.getOneAns().then((response) => {
          this.trueAns = [];
          if (response.msg == "很遗憾，答错了") {
            if (this.isFirst == 0) {
              this.$router.replace({ name: "jumpGZH" });
            }
            response.awardchoiceList.forEach((item) => {
              this.trueAns.push(item.choiceContent);
            });
            this.finish = true;
          } else {
            this.clickIndex++;
            const length = this.awardquestionList.awardquestionList.length - 1;
            if (this.clickIndex < length) {
            } else if (this.clickIndex >= length) {
              this.clickIndex = length;
              this.statetype = false;
            }
          }
          if (response.awardusernaire) {
            response.awardusernaire.amount = response.usedamount.amount;
            this.ansPoints = response.awardusernaire;
          }
        });
      }, 1000);
    },
    // 完成答题
    finishQuestion() {
			//防抖
      debounce(() => {
        console.log("触发");
        this.getOneAns().then((response) => {
          if (this.isFirst == 0) {
            this.$router.replace({ name: "jumpGZH" });
          }
          this.trueAns = [];
          if (response.msg == "很遗憾，答错了") {
            response.awardchoiceList.forEach((item) => {
              this.trueAns.push(item.choiceContent);
            });
          } else {
            this.isTrue = true;
          }

          this.finish = true;
          if (response.awardusernaire) {
            response.awardusernaire.amount = response.usedamount.amount;
            this.ansPoints = response.awardusernaire;
          }
        });
      }, 1000);
    },
    toRecordDetail() {
      console.log(121212);
      this.$router.push({
        name: "recordDetail",
        query: { row: this.video },
      });
    }, //时间戳转日期
    add0(m) {
      return m < 10 ? "0" + m : m;
    },
    riqi(shijianchuo) {
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return (
        y +
        "-" +
        this.add0(m) +
        "-" +
        this.add0(d) +
        " " +
        this.add0(h) +
        ":" +
        this.add0(mm) +
        ":" +
        this.add0(s)
      );
    },
    getOneAns() {
      if (this.answerList[this.clickIndex].xuanxiangId.length == 0) {
        Toast("请先完成当前题目！");
        return;
      }
      let newAns = [];
      let single = this.answerList[this.clickIndex];
      if (single.xuanxiangId instanceof Array) {
        single.xuanxiangId.forEach((item, index) => {
          newAns.push({
            questionId: single.questionId,
            xuanxiangId: item,
          });
        });
      } else {
        newAns = [this.answerList[this.clickIndex]];
      }
      return request({
        url: "/generator/awardnaire/front/answer?naireId=" + this.video,
        method: "post",
        data: newAns,
      });
    },
  },
};
</script>

<style >
.question {
  min-height: 100vh;
  /* background-image: url(../../../assets/background.png); */
  /* background-size: 100% 100%; */
  /* border: 1px solid red; */
}
.naire-content {
  width: 80%;
  height: 60%;
  padding: 40px 24px;
  border-radius: 10px;
  border: #f8f8f8 solid 1px;
  /* background-color: #F9B578; */
  /* box-shadow: #989898 4px 4px 7px -4px; */
}
.finish-content {
  width: 90%;
  height: 80%;
  padding: 20px 24px;
  border-radius: 10px;
  border: #f8f8f8 solid 1px;
  background-image: url(../../../assets/background.png);
  background-size: 100% 100%;
}
.naire-content > div {
  width: 100%;
  text-align: center;
  color: #9a9a9a;
}
.naire-content > div:nth-child(1) {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.naire-content > div:nth-child(2) {
  letter-spacing: 1.5px;
  line-height: 20px;
}
.naire-content > div:nth-child(3) {
  font-size: 13px;
  color: #b6b6b6;
}
.topheader {
  width: 100%;
  background-color: black;
}

.Theadermain {
  height: 48px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  width: 95%;
  margin: 0 auto;
}

.cetertitle {
  width: calc(100% - 124px);
  font-weight: bold;
}

.headerimg {
  width: 0.8rem;
  margin-left: 10px;
  transform: rotate(180deg);
}

.selectbut {
  padding: 15px;
  width: 100%;
  /* position: fixed;
		left: 0;
		bottom: 0; */
}

.main {
  /* border: 1px solid red; */
}

.titlestyle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background: #f1f3f4;
}

.mainstyle {
  padding: 15px;
}

.lasterstyle {
  padding: 15px;
  width: 100%;
  /* border: 1px solid red; */
}

.radiostyle {
  width: 100%;
  padding: 20px;
}
.finish-bg {
  background-image: url(../../../assets/ans.png);
  width: 170px;
  height: 40px;
  background-size: 100% auto;
}
.finish-con {
  width: 100%;
  background-color: #e9671f;
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 12px;
}
.finish-con-top {
  width: 100%;
  padding: 5px 15px;
  color: #fff;
  background-color: #ff9500;
}
.finish-con-top img {
  width: 20px;
  height: 20px;
}
.finish-con-con {
  width: 90%;
}
.finish-con-con > .finish-cc-jf {
  /* width: 100px;
		height: 60px; */
  padding: 15px 20px;
  border-radius: 10px;
  background-color: #fff;
  box-shadow: #f9b578 3px 3px 0px 0px;
  margin: 20px 0;
}
.finish-con-con > .finish-cc-xq {
  width: 100%;
  color: #fff;
  margin: 10px 0;
}
.finish-con-con img {
  width: 30px;
  height: 30px;
}
.bottom-btn {
  background-color: #ff9500;
  margin-top: 20px;
  height: 40px;
}
.van-radio__label,
.van-checkbox__label {
  width: calc(100% - 30px);
  word-wrap: break-word;
}
</style>
